<template>
  <div id="app">
    <table>
      <tr>
        <td>苹果10¥/斤,折扣8折</td>
      </tr>
      <tr>
        请输入您要购买的斤数
        <input type="text" v-model="str" />
      </tr>
      <tr>
        <button @click="add">结账买单</button>
      </tr>
      <tr>
        结账单:总价:{{
          zongjia
        }}¥元 折后价{{
          zhehou
        }}¥元 省了:{{
          sheng
        }}¥元
      </tr>
    </table>

    <!-- <h2>欢迎光临 vue开发的收银系统</h2>
    <p>苹果10¥/斤,折扣8折</p>
    <p>
      请输入您要购买的斤数
      <input type="text" />
    </p>
    <p>
      <button>结账买单</button>
    </p>
    <p></p> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      str: 0,
      arr: ''
    }
  },
  methods: {
    add() {
      this.arr = this.str
    }
  },
  computed: {
    zongjia() {
      return this.arr * 10
    },
    zhehou() {
      return this.zongjia * 0.8
    },
    sheng() {
      return this.zongjia - this.zhehou
    }
  }
}
</script>

<style></style>
